<template>
	<view class="container">
		<view class="container-bar">
			<scroll-view scroll-y @scroll="scroll" :show-scrollbar="true" :scroll-top="scrolltop">
				<view class="container-bar-content" v-if="lyrics.length > 0">
					<view class="scroll" v-for="(item,index) in lyrics"
						:style="{ color: lyricIndex === index ? 'skyblue' : '#ded9d9', transform: 'translateY(' + height + 'px)' }"
						:key="index">
						<text class="rich">{{item.lyric}}</text>
					</view>
				</view>

				<view v-else class="name">
					当前为空
					<!-- <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
					</u-empty> -->
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		debounce
	} from "@/utils/index.js";
	export default {
		name: "Lyrics",
		data() {
			return {
				scrolltop: 10,
			};
		},
		props: {
			lyricIndex: {
				type: [Number, String],
				default: 0
			},
			height: {
				type: [Number, String],
				default: 0
			}
		},
		methods: {

			scroll(e) {
				this.scrolltop = e.detail.scrollTop;
			}
		},
		computed: {
			// 歌词
			lyrics() {
				return this.$store.state.playMusicListData.lyrics;
			},
			// 歌曲时间
			playerTiem: {
				get() {
					return this.$store.state.playerTiem;
				},
				set() {},
			},
			// 当前歌词激活的下标值

		},
		watch: {
			scrollIndex(newVal) {
				this.scroll(newVal)
			},

		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-top: 15px;
		/* 溢出部分隐藏 */
		overflow-x: hidden;
		overflow-y: scroll;
		height: calc("100vh - 95px - 115px");
		
		
		// background-color: #f6f6f6;


		&-bar {
			overflow-x: hidden;
			overflow-y: scroll;
			height: 480px;
			
			
			



			&-content {
				text-align: center;
				margin: 100rpx auto;
				height: 130vw;

				// margin-top: 500rpx;

				transform: .5s;

				.scroll {
					border: 1xp solid red;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 40px;
					letter-spacing: 2px;
					list-style: none;
					margin-right: 15px;
					clear: both;

					.rich {
						// color: #999;
					}

				}
			}
		}
	}
</style>
